
<template>
  <div class="main">
    <h1>文章列表</h1>
    <div class="postedarticle">
      <div v-for="(article, index) in $store.state.article.articles" :key="index">
        <h3>{{ article.title }}</h3>
        <div>{{ article.content }}</div>
        <p>{{ article.createTime }}</p>
        <nuxt-link :to="{ path:'/articledetail/'+article.id, params: { id: article.id }}">阅读全文</nuxt-link>
      </div>
    </div>
    <article-form @create="create"/>
  </div>
</template>

<script>
import axios from '~/plugins/axios';
import domain from '~/plugins/domain';
import ArticleForm from '~/components/ArticleForm.vue';

export default {
  layout:'index',
  components:{
    ArticleForm
  },
  async fetch ({ store, params }) {
    let articles = (await axios.get('/article')).data;
    store.commit("article/init", articles);
  },

  methods:{
    async create({title, content}){
      if(title.length > 0 && title.length < 21){
        const data = await domain.create("Article",{title, content});
        this.$store.commit('article/create', {title, content});
      }else{
        alert("文章标题不得为空，且长度在20字以内。");
      }
    }
  },
}
</script>

<style scoped>
  .postedarticle {
    height: 1200px;
    overflow: auto; }
  .postedarticle > div {
    height: 250px;
    width: 100%;
    border: 0px;
    margin-bottom: 40px;
    background-image: url(/images/bgimg_r.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }
  .postedarticle > div > h3 {
    padding: 20px 0  0 80px;
    margin: 0px;
  }
  .postedarticle > div > div {
    height: 30%;
    padding: 20px 150px;
    margin: 0px;
    text-align: left;
    white-space:pre-line;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
  }
  .postedarticle > div > p {
    margin: 0px;
    position: absolute;
    right: 120px;
    bottom: 30px;
  }
  a {
    text-decoration: none;
    padding: 0 20px;
    font-weight: bold;
    position: absolute;
    left: 100px;
    bottom: 30px;
  }
  a:link, a:visited {
    color: #333;
  }
  a:hover, a:active {
    font-size: 28pt;
    color: #ff9900;
  }

</style>
